<template>
    <div>
        <div class="big-box">
            <div :class="['small-box',isShow?'box1':'']">1</div>
            <div :class="['small-box',isShow?'box2':'']">2</div>
            <div :class="['small-box',isShow?'box3':'']">3</div>
            <div :class="['small-box',isShow?'box4':'']">4</div>
        </div>
        <button @click="reverseBox">点击翻转</button>
    </div>
</template>

<script>
    export default {
        name: "flex3",
        data(){
          return{
              isShow:false
          }
        },
        methods:{
            reverseBox(){
                this.isShow=true
            }
        }
    }
</script>

<style scoped lang="less">
    .big-box{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 300px;
        height: 300px;
        border: 1px solid red;
        .small-box{
            margin-right: 10px;
            width: 50px;
            height: 50px;
            background-color: deeppink;
        }
    }
    .box1{
        order: 5;
    }
    .box2{
        order:4;
    }
    .box3{
        order:3;
    }
    .box4{
        order:2;
    }
    button{
        width: 100px;
        height: 100px;
    }
</style>